<template>
    <div class="like">
        <div class="title">
            <img src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
            <span>猜你喜欢</span>
        </div>
        <ul class="like-list">
            <router-link :to="'/detail/'+ item.id" class="like-item" v-for="item in list" :key="item.id" tag="li">
                <img :src='item.imgUrl' alt="">
                <div class="like-info">
                    <p class="item-title">{{ item.title }}</p>
                    <p class="item-desc">{{ item.desc }}</p>
                    <button class="item-button">查看详情</button>
                </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
    .like
        background-color #fff
        margin-top .2rem
        .title
            padding: .24rem 0 .26rem
            font-size .32rem
            padding-left .2rem
            img
                width .3rem
                height .3rem
        .like-list
            margin-left .24rem
            .like-item
                display flex
                padding .2rem 0
                img
                    width 2rem
                    height 2rem
                .like-info
                    flex 1
                    padding-left .22rem
                    .item-title
                      margin-top .26rem
                      font-size .32rem
                      color #212121
                      ellipsis()
                    .item-desc
                      margin-top .14rem
                      color #ccc
                      ellipsis()
                    .item-button
                      background-color #ff9300
                      border-radius .06rem
                      margin .22rem .6rem 0 0
                      font-size .3rem
                      color #fff
                      padding .15rem
</style>
